<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd({ workspace })">
            添加
          </el-button>
        </div>
      </template>

      <el-table
        :data="pageData.data"
        stripe
        style="width: 100%"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
      >
        <el-table-column label="模块名称">
          <template #default="{ row }">
            <template v-if="row.moduleType == 0">
              <el-button
                link
                type="primary"
                @click="
                  $router.push({
                    path: '../module-data',
                    query: {
                      moduleId: row.id,
                    },
                  })
                "
              >
                {{ row.moduleName }}
              </el-button>
            </template>
            <template v-else>
              {{ row.moduleName }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="350px">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              icon="plus"
              @click="pageActions.handleAdd({ parentId: row.id, workspace })"
            >
              新增
            </el-button>
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)"> 编辑 </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      ></el-pagination>
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    >
      <template #model>
        <el-form-item label="模型选择" required>
          <el-cascader
            v-model="pageData.detail.modelIds"
            :options="modelList"
            :props="{ value: 'id', label: 'modelName' }"
            @change="handleChange"
          />
        </el-form-item>
      </template>
    </jax-dialog-edit>
  </app-page>
</template>

<script setup>
import { http, usePageList } from 'jax-node'
import { useRoute } from 'vue-router'

const route = useRoute()
const { pageData, pageActions } = usePageList({
  defaultDetail: {
    moduleType: 0,
  },
})

const modelList = ref([])
const workspace = ref(route.query.workspace)

const required = true
const json = computed(() => {
  return [
    { name: 'moduleName', label: '模块名称', required },
    {
      name: 'moduleType',
      label: '模块类型',
      required,
      type: 'select',
      options: [
        { value: 0, label: '系统模型' },
        { value: 1, label: '手动导入(未完成)' },
        { value: 2, label: '其他' },
      ],
    },
    // { name: 'model', label: '模型选择', required },
    {
      name: 'modelId',
      label: '模型选择',
      required,
      type: 'select',
      options: modelList,
    },
  ]
})

pageActions.getData = () => {
  return http({
    url: '/module/tree',
    params: {
      workspace: workspace.value,
    },
  }).then(res => {
    pageData.data = res
  })
}

function getModelList() {
  return http({
    url: '/model',
    params: {},
  }).then(res => {
    modelList.value = res.map(item => {
      let prefix = ''
      if (item.index > 1) {
        prefix = '├' + '─'.repeat((item.index - 1) * 1)
      }
      return {
        ...item,
        label: prefix + item.modelName,
        value: item.id,
        index: item.index,
      }
    })
  })
}

getModelList()

const handleChange = () => {
  console.log('handleChange', handleChange)
}
</script>
